<template>
	<cl-select-table
		v-model="value"
		:title="t('选择客户信息')"
		:service="service.customer.customer"
		:columns="columns"
		:multiple="multiple"
		:dict="{ text: 'name' }"
		pickerType="text"
	/>
</template>

<script setup lang="ts">
defineOptions({
	name: "customer-customer-select",
});

import { useCool } from "/@/cool";
import { useI18n } from "vue-i18n";
import { CrudProps } from "/#/crud";
import { reactive, ref, useModel } from "vue";

const props = defineProps({
	...CrudProps,
	modelValue: null,
	multiple: Boolean,
});

const { service } = useCool();
const { t } = useI18n();

const value = useModel(props, "modelValue");

// 选项
const options = reactive({
	level: [
		{ label: t("普通"), value: 0 },
		{ label: t("VIP"), value: 1 },
		{ label: t("SVIP"), value: 2 },
	],
	source: [
		{ label: t("线上"), value: 0 },
		{ label: t("展会"), value: 1 },
		{ label: t("转介"), value: 2 },
	],
	status: [
		{ label: t("潜在"), value: 0 },
		{ label: t("跟进中"), value: 1 },
		{ label: t("已成交"), value: 2 },
	],
	industry: [
		{ label: t("电子"), value: 0 },
		{ label: t("机械"), value: 1 },
		{ label: t("纺织"), value: 2 },
	],
	scale: [
		{ label: t("微型"), value: 0 },
		{ label: t("小型"), value: 1 },
		{ label: t("中型"), value: 2 },
		{ label: t("大型"), value: 3 },
	],
});

const columns = ref([
	{ label: t("昵称"), prop: "userName", minWidth: 140 },
	{ label: t("名称"), prop: "name", minWidth: 140 },
	{ label: t("电话"), prop: "phone", minWidth: 140 },
	{ label: t("等级"), prop: "level", minWidth: 120, dict: options.level },
	{ label: t("来源"), prop: "source", minWidth: 120, dict: options.source },
	{ label: t("状态"), prop: "status", minWidth: 120, dict: options.status },
	{
		label: t("备注"),
		prop: "remark",
		showOverflowTooltip: true,
		minWidth: 200,
	},
	{ label: t("邮箱"), prop: "email", minWidth: 140 },
	{
		label: t("地址"),
		prop: "address",
		showOverflowTooltip: true,
		minWidth: 200,
	},
	{ label: t("国家"), prop: "country", minWidth: 120 },
	{
		label: t("行业"),
		prop: "industry",
		minWidth: 120,
		dict: options.industry,
	},
	{ label: t("规模"), prop: "scale", minWidth: 120, dict: options.scale },
	{
		label: t("最近联系时间"),
		prop: "lastContactTime",
		minWidth: 170,
		sortable: "custom",
		component: { name: "cl-date-text" },
	},
]);
</script>
